import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { Suspense } from 'react';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, Delta, EmptyState, Skeleton, Stat, Badge, Unavailable } from '@/components/ui/primitives';
import { MarketTable } from '@/components/market/market-table';
import { AssetBrowser } from '@/components/market/asset-browser';
import { Thumb } from '@/components/market/bits';
import type { SP } from '@/lib/search-params';
import { AssetTable } from '@/components/market/asset-list';
import { SalesTable, ListingsTable } from '@/components/market/sales-table';
import { LotsIntelTable } from '@/components/market/lots-table';
import { LineChart } from '@/components/charts/line-chart';
import { BarChart } from '@/components/charts/bar-chart';
import { getBrandsInCategory, getCategoryRow, getCategorySeries, getMarketRows, getPopulationTrend, getSetsInCategory } from '@/lib/queries/markets';
import { rankedAssets, categoryScope } from '@/lib/queries/assets';
import { getRecentSalesInScope, getTopSales, listListings, listLots, listNews, listRadar } from '@/lib/queries/market-lists';
import { getIndex } from '@/lib/queries/indices';
import { fmtMoney, fmtNum, fmtRelative, fmtDate } from '@/lib/format';
import { categoryCrumbs, getCategory, humanize } from '@/lib/taxonomy';
import { CATEGORIES } from '@rareindex/taxonomy';

export const revalidate = 300;

export async function generateStaticParams() {
  return CATEGORIES.filter((c) => c.phase === 1).map((c) => ({ slug: c.slug }));
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const c = getCategory(slug);
  if (!c) return { title: 'Market not found' };
  return { title: `${c.name} market`, description: `${c.name} collectibles market on RareIndex: index, sales, volume, top movers, most valuable assets, listings and news.` };
}

export default async function MarketPage({ params, searchParams }: { params: Promise<{ slug: string }>; searchParams: Promise<SP> }) {
  const { slug } = await params;
  const sp = await searchParams;
  const row = await getCategoryRow(slug);
  if (!row) notFound();
  const { node, snapshot, counts } = row;
  const index = node.index ? await getIndex(node.index) : null;
  const subcategories = CATEGORIES.filter((c) => c.parent === slug);
  return (
    <div>
      <PageHeader
        crumbs={[{ label: 'Markets', href: '/markets' }, ...categoryCrumbs(slug)]}
        title={node.name}
        description={node.description ?? `${node.name} market data: verified sales, live listings, valuations and category index.`}
        meta={
          <>
            <Badge tone={node.phase === 1 ? 'index' : 'neutral'}>Phase {node.phase}</Badge>
            {index ? (
              <Link href={`/rareindex/${index.ticker}`} className="hover:text-fg">
                Subindex {index.ticker}
              </Link>
            ) : null}
            {node.compliance?.length ? <Badge tone="alert">{node.compliance.map(humanize).join(' · ')}</Badge> : null}
            <Link href={`/explore?category=${slug}`} className="hover:text-fg">
              Explore assets →
            </Link>
          </>
        }
      />

      <section className="grid grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border sm:grid-cols-4 lg:grid-cols-8">
        {[
          ['Tracked assets', fmtNum(counts.assets)],
          ['With valuation', fmtNum(counts.priced)],
          ['Sales (all time)', fmtNum(counts.sales)],
          ['Sales 30D', fmtNum(counts.sales30d)],
          ['Volume 30D', counts.volume30dUsd != null ? fmtMoney(counts.volume30dUsd, 'USD', { compact: true }) : '—'],
          ['Active listings', fmtNum(counts.listings)],
          ['Median RIV', counts.medianRivUsd != null ? fmtMoney(counts.medianRivUsd) : '—'],
          ['Market cap est.', snapshot?.marketCapEstUsd != null ? fmtMoney(snapshot.marketCapEstUsd, 'USD', { compact: true }) : '—'],
        ].map(([k, v]) => (
          <div key={k} className="bg-elevated px-3 py-2.5">
            <Stat label={k} value={v} />
          </div>
        ))}
      </section>
      {snapshot?.marketCapEstUsd != null ? <p className="mt-1 text-[11px] text-subtle">Market cap estimate = estimated population × representative RIV per asset, summed; indicative only (§124).</p> : null}
      {counts.assets > 0 && counts.priced === 0 ? (
        <p className="mt-2 rounded-md border border-border bg-sunken px-3 py-2 text-[12px] text-muted">
          <span className="font-medium text-fg">{fmtNum(counts.assets)} {node.name} assets are catalogued.</span> Valuations publish per asset once enough verified sales exist; guide prices from price-guide sources are shown in the meantime, labelled as such (never presented as market value).
        </p>
      ) : null}

      <div className="mt-4">
        <Suspense fallback={<Skeleton className="h-[32rem]" />}>
          <AssetBrowser scope={{ category: slug }} sp={sp} basePath={`/markets/${slug}`} title={`Assets in ${node.name}`} subcategories={subcategories} />
        </Suspense>
      </div>

      {counts.sales > 0 || counts.listings > 0 ? (
        <>
          <Suspense fallback={<Skeleton className="mt-4 h-72" />}>
            <IndexPanel slug={slug} />
          </Suspense>

          <Suspense fallback={<Skeleton className="mt-4 h-72" />}>
            <Movers slug={slug} />
          </Suspense>

          <Suspense fallback={<Skeleton className="mt-4 h-72" />}>
            <Activity slug={slug} />
          </Suspense>
        </>
      ) : (
        <Card className="mt-4 p-4">
          <p className="t-subtitle text-fg">Market analytics publish once verified sales or live listings exist in {node.name}.</p>
          <p className="mt-1 text-[13px] leading-relaxed text-muted">
            Movers, volume, records, value opportunities, auctions and the category index all derive from observed transactions. Until then the catalogue above is complete and guide prices are shown where a price-guide source reports them (labelled, never presented as market value).{' '}
            <Link href="/data" className="underline-offset-2 hover:text-fg hover:underline">
              How coverage grows →
            </Link>
          </p>
        </Card>
      )}

      <Suspense fallback={<Skeleton className="mt-4 h-40" />}>
        <Structure slug={slug} />
      </Suspense>
    </div>
  );
}

async function IndexPanel({ slug }: { slug: string }) {
  const series = await getCategorySeries(slug, 730);
  const points = series.filter((p) => p.indexValue != null).map((p) => ({ x: p.date, y: p.indexValue! }));
  const salesSeries = series.map((p) => ({ x: p.date, y: p.sales }));
  return (
    <section className="mt-4 grid gap-4 lg:grid-cols-[2fr_1fr]">
      <Card className="p-4">
        <h2 className="text-sm font-semibold">Category index</h2>
        <p className="text-xs text-muted">Daily category index from valuations of priced constituents; publishes once enough assets are priced.</p>
        <div className="mt-2">
          <LineChart ariaLabel={`${slug} category index`} height={220} series={[{ id: 'idx', label: 'Category index', kind: 'area', points }]} emptyLabel="Index building — not enough priced constituents yet" />
        </div>
      </Card>
      <Card className="p-4">
        <h2 className="text-sm font-semibold">Daily sales</h2>
        <p className="text-xs text-muted">Verified transactions per day (count)</p>
        <div className="mt-2">
          <LineChart ariaLabel={`${slug} daily sales`} height={220} series={[{ id: 'sales', label: 'Sales', kind: 'step', points: salesSeries }]} emptyLabel="No snapshot history yet" />
        </div>
      </Card>
    </section>
  );
}

async function Movers({ slug }: { slug: string }) {
  const scope = categoryScope(slug);
  const [gainers, losers, volume, expensive, trending] = await Promise.all([
    rankedAssets('gainers', { scope, limit: 8, window: '7d' }),
    rankedAssets('losers', { scope, limit: 8, window: '7d' }),
    rankedAssets('volume', { scope, limit: 8 }),
    rankedAssets('expensive', { scope, limit: 8 }),
    rankedAssets('trending', { scope, limit: 8 }),
  ]);
  const block = (title: string, sub: string, items: typeof gainers, columns: Parameters<typeof AssetTable>[0]['columns']) => (
    <Card>
      <CardHeader title={title} subtitle={sub} />
      <AssetTable items={items} columns={columns} emptyTitle="No data yet" emptyDescription="Needs priced assets with sales history in this category." />
    </Card>
  );
  return (
    <section className="mt-4 grid gap-4 xl:grid-cols-2">
      {block('Top gainers · 7D', 'Assets with ≥3 sales used in valuation', gainers, ['riv', 'change7d', 'change30d', 'sales'])}
      {block('Top losers · 7D', 'Assets with ≥3 sales used in valuation', losers, ['riv', 'change7d', 'change30d', 'sales'])}
      {block('Highest volume · 30D', 'Sum of verified sale prices, USD', volume, ['riv', 'sales30d', 'change30d', 'liquidity'])}
      {block('Most valuable', 'Ranked by RareIndex Valuation', expensive, ['riv', 'latestSale', 'change1y', 'rarity'])}
      {block('Trending', 'Price × volume × listing momentum', trending, ['riv', 'trending', 'change7d', 'sales30d'])}
      <Card>
        <CardHeader title="Value opportunities" subtitle="Assets whose lowest ask sits materially below RIV — analytical data, not advice" />
        <AssetTable items={await rankedAssets('opportunity', { scope, limit: 8 })} columns={['riv', 'minAsk', 'opportunity', 'listings']} emptyTitle="No opportunities detected" emptyDescription="Requires both a valuation and active listings." />
      </Card>
    </section>
  );
}

async function Activity({ slug }: { slug: string }) {
  const scope = categoryScope(slug);
  const [records, recent, listings, lots, news, radar, pop] = await Promise.all([
    getTopSales(6, scope),
    getRecentSalesInScope(scope, 10),
    listListings({ category: slug, pageSize: 10, sort: 'newest' }),
    listLots({ category: slug, limit: 6, sort: 'value' }),
    listNews({ category: slug, limit: 6 }),
    listRadar({ scope, limit: 6 }),
    getPopulationTrend(slug),
  ]);
  const popByGrader = new Map<string, Array<{ x: string; y: number }>>();
  for (const p of pop) (popByGrader.get(p.grader) ?? popByGrader.set(p.grader, []).get(p.grader)!).push({ x: p.reportDate, y: p.total });
  return (
    <section className="mt-4 grid gap-4 xl:grid-cols-2">
      <Card>
        <CardHeader title="Newest records" subtitle="Highest verified sales in this market" action={<Link href={`/records`} className="text-muted hover:text-fg">All records →</Link>} />
        <SalesTable items={records} emptyDescription="No verified sales in this category yet." />
      </Card>
      <Card>
        <CardHeader title="Latest sales" action={<Link href={`/sales?category=${slug}`} className="text-muted hover:text-fg">All sales →</Link>} />
        <SalesTable items={recent} emptyDescription="No sales in this category yet." />
      </Card>
      <Card className="xl:col-span-2">
        <CardHeader title="Live listings" subtitle="Asking prices are not market values" action={<Link href={`/listings?category=${slug}`} className="text-muted hover:text-fg">All listings →</Link>} />
        <ListingsTable items={listings.items} />
      </Card>
      <Card>
        <CardHeader title="Biggest auctions" subtitle="Lots by hammer, bid or high estimate" action={<Link href="/auctions" className="text-muted hover:text-fg">Auctions →</Link>} />
        <LotsIntelTable items={lots} />
      </Card>
      <Card>
        <CardHeader title="Population trends" subtitle="Total graded population reported per grader" />
        {popByGrader.size ? (
          <div className="p-4">
            <LineChart ariaLabel="Population trend" height={200} series={[...popByGrader.entries()].map(([g, pts]) => ({ id: g, label: g.toUpperCase(), points: pts }))} />
          </div>
        ) : (
          <EmptyState title="No population reports" description="Population data appears when grading-company connectors publish reports for assets in this category." className="py-8" />
        )}
      </Card>
      <Card>
        <CardHeader title="Rare Radar" action={<Link href="/radar" className="text-muted hover:text-fg">Open radar →</Link>} />
        {radar.length ? (
          <ul className="divide-y divide-border text-[12px]">
            {radar.map((r) => (
              <li key={r.id} className="flex items-center justify-between gap-3 px-4 py-2">
                <Link href={`/asset/${r.assetSlug}`} className="truncate font-medium text-fg hover:underline">
                  {r.assetTitle}
                </Link>
                <span className="shrink-0 text-muted">
                  {humanize(r.kind)} · {fmtRelative(r.detectedAt)}
                </span>
              </li>
            ))}
          </ul>
        ) : (
          <EmptyState title="Radar is quiet" className="py-8" />
        )}
      </Card>
      <Card>
        <CardHeader title="News" action={<Link href={`/news?category=${slug}`} className="text-muted hover:text-fg">All news →</Link>} />
        {news.items.length ? (
          <ul className="divide-y divide-border text-[12px]">
            {news.items.map((n) => (
              <li key={n.id} className="px-4 py-2">
                <a href={n.url} target="_blank" rel="noopener nofollow" className="font-medium text-fg hover:underline">
                  {n.title}
                </a>
                <span className="block text-[11px] text-muted">
                  {n.sourceName} · {n.publishedAt ? fmtDate(n.publishedAt) : 'undated'}
                </span>
              </li>
            ))}
          </ul>
        ) : (
          <EmptyState title="No news indexed" description="News connectors are not yet publishing for this market." className="py-8" />
        )}
      </Card>
    </section>
  );
}

async function Structure({ slug }: { slug: string }) {
  const [children, sets, brands] = await Promise.all([getMarketRows(slug), getSetsInCategory(slug, 40), getBrandsInCategory(slug, 30)]);
  return (
    <section className="mt-4 grid gap-4">
      {children.length ? (
        <Card>
          <CardHeader title="Subcategories" />
          <MarketTable rows={children} showPhase />
        </Card>
      ) : null}
      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title="Sets & releases" subtitle={`${fmtNum(sets.length)}${sets.length >= 40 ? '+' : ''} releases catalogued · ranked by sales, then size`} action={<Link href={`/markets/${slug}?sort=number#assets`} className="text-muted hover:text-fg">Browse by set →</Link>} />
          {sets.length ? (
            <ul className="grid grid-cols-1 text-[12px] sm:grid-cols-2">
              {sets.map((s) => (
                <li key={s.slug} className="flex items-center gap-2 border-b border-border px-4 py-1.5">
                  <Thumb src={s.thumb} alt="" size={28} />
                  <Link href={`/set/${s.slug}`} className="min-w-0 flex-1 truncate font-medium text-fg hover:underline">
                    {s.name}
                    {s.code ? <span className="ml-1 text-subtle">{s.code}</span> : null}
                    {s.releaseYear ? <span className="ml-1 text-subtle">{s.releaseYear}</span> : null}
                  </Link>
                  <span className="num shrink-0 text-muted">
                    {fmtNum(s.assets)}{s.sales ? ` · ${fmtNum(s.sales)} sales` : ''}{s.priced ? ` · ${fmtNum(s.priced)} priced` : ''}
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <EmptyState title="No sets catalogued" className="py-8" />
          )}
        </Card>
        <Card>
          <CardHeader title="Brands" subtitle="Median RIV of priced assets" />
          {brands.length ? (
            <div className="p-4">
              <BarChart ariaLabel="Assets per brand" data={brands.slice(0, 12).map((b) => ({ label: b.brand, value: b.assets, sublabel: `${b.priced} priced · median RIV ${b.medianRivUsd != null ? fmtMoney(b.medianRivUsd) : '—'}`, href: `/brand/${encodeURIComponent(b.brand)}` }))} />
            </div>
          ) : (
            <EmptyState title="No brand data" className="py-8" />
          )}
        </Card>
      </div>
      <p className="text-[11px] text-subtle">
        Unavailable metrics render as <Unavailable /> rather than estimates (§192).
      </p>
      <span className="hidden">
        <Delta value={null} />
      </span>
    </section>
  );
}